<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="provinceid" onchange="provincess();">
			省份：<option value="-1" >请选择省份</option>
		</select>
		<select name="" id="cityid" onchange="cityss();">
			城市：<option value="-1" >请选择城市</option>
		</select>
		<select name="" id="countyid" onchange="countyss();">
			区/县：<option value="-1" >请选择区/县</option>
		</select>
		<br />
		您选择的是：<label id="chances"></label>
	</body>
	<script type="text/javascript">
		var provinces =['湖南省','广东省','福建省','江西省'];
		
		var citys =[
			['长沙市','株洲市'],
			['广州市','深圳市'],
			['厦门市','龙岩市'],
			['南昌市','赣州市']
		];
		var countys=[
			[
			['长沙县','天心区'],
			['天元区','石峰区']
			],
			
			[
			['白云区','天河区'],
			['罗湖区','龙华区']
			],
			
			[
			['同安区','集美区'],
			['新罗区','上杭县']
			],
			
			[
			['南昌县','青云谱区'],
			['赣县区','南康区']
			]
		];
		
		//获取每个下拉框的值
		var provinceobj =document.getElementById('provinceid');
		var cityobj =document.getElementById('cityid');
		var countyobj =document.getElementById('countyid');
		
		function provincess(){
			
			cityobj.innerHTML =`<option value="-1">请选择城市</option>`;
			if(provinceobj.value ==-1){
				return;
			}
			
			var city = citys[provinceobj.value];			
			for(var i=0;i<city.length;i++){
				cityobj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
				console.log(cityobj.innerHTML);
			}
			
			//每选择一项则出现一项内容（以下3行）
			var procinceName =provinces[provinceobj.value];
			var chances =document.getElementById('chances');
			chances.innerText =procinceName;
		}
		
		function cityss(){
			
			countyobj.innerHTML =`<option value="-1">请选择区/县</option>`;
			if(cityobj.value==-1){
				return;
			}
			
			var county =countys[provinceobj.value][cityobj.value];
			for(var i=0;i<county.length;i++){
					countyobj.innerHTML+=`<option value="`+i+`">`+county[i]+`</option>`;	
			}

			//每选择一项则出现一项内容（以下4行）
			var procinceName =provinces[provinceobj.value];
			var cityName =citys[provinceobj.value][cityobj.value];
			var chances =document.getElementById('chances');
			chances.innerText =procinceName+"——"+cityName;
		}
		
		function countyss(){

			//每选择一项则出现一项内容（以下5行）
			var procinceName =provinces[provinceobj.value];
			var cityName =citys[provinceobj.value][cityobj.value];
			var countyName =countys[provinceobj.value][cityobj.value][countyobj.value];	
			var chances =document.getElementById('chances');
			chances.innerText =procinceName+"——"+cityName+"——"+countyName;
		}
		
		
		onload = function(){
			var provinceobj = document.getElementById('provinceid');
			for(var i=0;i<provinces.length;i++){
				provinceobj.innerHTML+= `<option value="`+i+`">`+provinces[i]+`</option>`;
			}
		}
		
		
		
		
	</script>
</html>
